<template>
  <div
    class="page-content _rel _flex _p20 _flex-a-start _flex-a-stretch _wrapper"
  >
    <div class="_flex-item-1 _border" ref="content"></div>
    <div class="_p20">
      <button @click="randomAdd">随机添加元素</button>
      <button @click="openRain">
        {{ isOpenRain ? "关闭" : "开启" }}下雨效果
      </button>
      <div>
        <input v-model="text" />
        <button @click="addText">确定</button>
        <button @click="add3DText">3D</button>
      </div>
    </div>
  </div>
</template>

<script>
import ThreeMain from "@/components/com-three/ThreeMain.js";

export default {
  name: "Tool3D",
  data() {
    return {
      isOpenRain: false,
      text: "",
    };
  },
  setup() {},
  mounted() {
    this.$nextTick(() => {
      ThreeMain.init({
        dom: this.$refs["content"],
        showAxesHelperTag: true,
        showGridTag: true,
      });
    });
  },
  methods: {
    randomAdd() {
      ThreeMain.randomElement();
    },
    openRain() {
      if (this.isOpenRain) {
        ThreeMain.closeRain();
      } else {
        ThreeMain.openRain();
      }
      this.isOpenRain = !this.isOpenRain;
    },
    addText() {
      if (this.text && this.text.trim().length > 0) {
        ThreeMain.addText(this.text);
      }
    },
    add3DText() {
      if (this.text && this.text.trim().length > 0) {
        ThreeMain.add3DText(this.text);
      }
    },
  },
};
</script>

<style scoped>
canvas {
  width: 100%;
  height: 100%;
}

.page-content {
  height: 80vh;
}
</style>
